<template>
	<el-form ref="form" class="plr-1" label-position="top" :model="form" :disabled="saving" :rules="rules">
		<el-form-item label="聊天背景图">
			<el-upload drag list-type="picture" :headers="{ token }" :before-upload="beforeUpload1" :file-list="[fileList]"
				 :data="fileData1" :on-progress="uploadProgress1" :on-error="uploadError"
				:on-success="uploadSuccess1" :action="`${baseUrl}/index/uposs`" accept="image/*" :show-file-list="false">
				<i class="el-icon-upload" />
				<div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
			</el-upload>
			<div class="images-item" v-if="form.img">
				<span class="el-icon-close remove" @click="handleRemove1()" v-if="fileList.status != 'uploading'" />
				<div class="images-item__show">
					<el-image class="img" :src="form.img" fit="contain" :preview-src-list="previewList1" />
					<div class="images-item__show--right">
						<div class="ellipsis">{{ fileList.name }}</div>
						<el-progress v-if="fileList.status == 'uploading'" :stroke-width="2" :percentage="fileList.percentage"
							:format="percentageFormat1" />
					</div>
				</div>
			</div>
		</el-form-item>

		<el-form-item label="聊天客服头像">
			<div style="display: flex;">
				<el-upload drag list-type="picture" :headers="{ token }" :before-upload="beforeUpload"
					:file-list="[form]" :data="fileData" :on-progress="uploadProgress" :on-error="uploadError1"
					:on-success="uploadSuccess" :action="`${baseUrl}/index/uposs`" accept="image/*"
					:show-file-list="false" style="width: 150px;">
					<i class="el-icon-upload" />
					<div class="el-upload__text"><em>点击上传</em></div>
				</el-upload>
				<div class="images-item" v-if="form.imgLogo">
					<span class="el-icon-close remove" @click="handleRemove()" v-if="form.status != 'uploading'" />
					<div class="images-item__show">
						<el-image class="img" :src="form.imgLogo" fit="contain" :preview-src-list="previewList" />
						<div class="images-item__show--right">
							<div class="ellipsis">{{ form.name }}</div>
							<el-progress v-if="form.status == 'uploading'" :stroke-width="2"
								:percentage="form.percentage" :format="percentageFormat" />
						</div>
					</div>
				</div>
			</div>
		</el-form-item>
		<el-form-item prop="is_open" label="是否自动打开聊天弹框">
			<cl-select v-model="form.is_open" filterable style="width: 100%">
				<el-option :value="1" label="是" />
				<el-option :value="0" label="否" />
			</cl-select>
		</el-form-item>
		<el-form-item prop="title" label="抬头标题">
			<el-input v-model="form.title" placeholder="请填写抬头标题"></el-input>
		</el-form-item>
		<el-form-item prop="teacherName" label="聊天客服名称">
			<el-input v-model="form.teacherName" placeholder="请填写名称"></el-input>
		</el-form-item>
		<el-form-item prop="customer_loading_time" label="客服回复消息加载时长">
			<el-input v-model="form.customer_loading_time" placeholder="请填写客服加载时长时间">
				<template slot="append">秒</template>
			</el-input>
		</el-form-item>
		<div style="margin-bottom: 10px;">问答模块</div>
		<el-form-item prop="kaitou" label="开头语">
			<el-input v-model="form.kaitou" placeholder="请填写开头语"></el-input>
		</el-form-item>
		<el-form-item prop="jieshu" label="结束语">
			<el-input v-model="form.jieshu" placeholder="请填写结束语"></el-input>
		</el-form-item>

		<div v-for="(item, index) in form.formList" :key="index">
			<el-form-item :label="'问题' + (index + 1)" prop="formList">
				<el-input v-model="form.formList[index].question" :placeholder="`问题` + (index + 1)">
					<el-button slot="append" icon="el-icon-minus" @click="minusQuestion(index)"></el-button>
				</el-input>
			</el-form-item>
			<el-form-item :label="`回复内容`">
				<div style="
						margin-bottom: 10px;
						display: flex;
						justify-content: flex-start;
						flex-direction: row;
						flex-wrap: wrap;
					">
					<el-tag style="margin: 0 5px" v-for="(v, i) in item.options" :key="i" closable
						@close="delOption(index, i)">{{ v }}</el-tag>
				</div>
				<div>
					<el-input :ref="`newOption` + (index + 1)" v-model="form.formList[index].newOption"
						placeholder="新增回复内容" size="small">
						<el-button slot="append" type="primary" @click="newOption(index)">点击新增</el-button>
					</el-input>
				</div>

				<div style="margin-top:10px">
				<el-form-item prop="jieshu" label="点击后跳转企微">
						<cl-select v-model="form.formList[index].is_go_five" placeholder="是否点击最后一个回复内容后跳转企微" filterable
						style="width: 60%">
						<el-option :value="1" label="是" />
						<el-option :value="0" label="否" />
					</cl-select>
				</el-form-item>
				</div>
			</el-form-item>
		</div>
		<el-button type="primary" @click="newQuestion">新增问题</el-button>
	</el-form>
</template>

<script>
import { baseUrl, javaUrlApi } from "@/config/env";
import dayjs from "dayjs";
import { mapGetters } from "vuex";
import SettingHelp from "@/components/setting-help";
import miniList from "../../mixins/mini_list.js";
export default {
	mixins: [miniList],
	components: {},
	props: {
		saving: Boolean,
		view: {
			type: Object,
			default: () => ({})
		},
		adMpList: {
			type: Array,
			default: () => []
		}
	},
	computed: {
		...mapGetters(["token"]),
		previewList() {
			const { imgLogo } = this.form;
			return [imgLogo];
		},
		previewList1() {
			const { img } = this.form;
			return [img];
		}
		
	},
	data() {
		return {
			baseUrl,
			javaUrlApi,
			fileData: {}, //最外层图片上传
			fileData1: {}, //最外层图片上传
			fileDataAddTeacher: {}, //加微按钮图片
			form: this.view.options,
			rules: {
				content: [{ required: true, message: "请填写内容" }],
				skip_mp_id: [{ required: true, message: "请选择跳转小程序" }]
			},
			fileList: {

			}
		};
	},
	methods: {
		//***************最外层图片上传**************
		handleRemove() {
			this.form = { ...this.form, imgLogo: "" };
		},
		percentageFormat(percentage) {
			return this.toFixed(percentage) + "%";
		},
		// 上传文件
		beforeUpload(file) {
			this.fileData.name = file.name;
			this.fileData.dirname = "upload/" + dayjs().format("YYYY-MM-DD");
		},
		// 文件上传时
		uploadProgress(evt, file) {
			Object.assign(this.form, {
				...file,
				imgLogo: file.url
			});
		},
		// 上传成功
		uploadSuccess(res, file) {
			this.form = {
				...this.form,
				name: file.name,
				status: file.status,
				percentage: file.percentage,
				imgLogo: res.data
			};
			this.$message.success("上传成功");
			this.view.options = this.form;
		},
		// 上传失败
		uploadError(err) {
			const error = JSON.parse(err.message);
			this.$message.error(error.msg);
		},

		// ----------------------------------------》》》>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
		handleRemove1() {
			this.form = { ...this.form, img: "" };
		},
		percentageFormat1(percentage) {
			return this.toFixed(percentage) + "%";
		},
		// 上传文件
		beforeUpload1(file) {
			this.fileData1.name = file.name;
			this.fileData1.dirname = "upload/" + dayjs().format("YYYY-MM-DD");
		},
		// 文件上传时
		uploadProgress1(evt, file) {
			console.log('uploadProgress1file',file)
			Object.assign(this.fileList, {
				...file,
				img: file.url
			});


		},
		// 上传成功
		uploadSuccess1(res, file) {
			console.log(11111)
			this.fileList = {
				...this.fileList,
				name: file.name,
				status: file.status,
				percentage: file.percentage,
				img: res.data
			};
				
			this.form.img = res.data
			this.$message.success("上传成功");
			this.view.options = this.form;
			console.log(this.form.img,'this.form.img')
		},

		// 上传失败
		uploadError1(err) {
			const error = JSON.parse(err.message);
			this.$message.error(error.msg);
		},


		//******************加微按钮图片****************** */
		addTeacherHandleRemove() {
			this.form = { ...this.form, addTeacherImg: "" };
		},
		addTeacherPercentageFormat(percentage) {
			return this.toFixed(percentage) + "%";
		},
		beforeUploadAddTeacher(file) {
			this.fileDataAddTeacher.name = file.name;
			this.fileDataAddTeacher.dirname = "upload/" + dayjs().format("YYYY-MM-DD");
		},
		uploadProgressAddTeacher(evt, file) {
			Object.assign(this.form, {
				...file,
				addTeacherImg: file.url
			});
		},
		uploadSuccessAddTeacher(res, file) {
			this.form = {
				...this.form,
				addTeacherName: file.name,
				addTeacherStatus: file.status,
				addTeacherPercentage: file.percentage,
				addTeacherImg: res.data
			};
			this.$message.success("上传成功");
			this.view.options = this.form;
		},
		uploadErrorAddTeacher(err) {
			const error = JSON.parse(err.message);
			this.$message.error(error.msg);
		},
		newOption(index) {
			this.form.formList[index].options.push(this.form.formList[index].newOption);
			this.form.formList[index].newOption = "";
		},
		delOption(index, i) {
			this.form.formList[index].options.splice(i, 1);
			console.log(this.form.formList, "delOption");
		},
		newQuestion() {
			this.form.formList.push({
				question: "",
				newOption: "",
				options: []
			});
		},
		minusQuestion(index) {
			this.form.formList.splice(index, 1);
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep {

	.el-upload,
	.el-upload-dragger {
		width: 100%;
	}

	.el-upload-dragger {
		height: 120px;

		.el-icon-upload {
			margin-top: 15px;
		}
	}
}

.images-item {
	border: solid 1px #e0e0e0;
	border-radius: 3px;
	padding: 10px 8px 14px;
	margin: 0px 10px;
	position: relative;
	flex: 1;
	height: 94px;

	.remove {
		position: absolute;
		right: 10px;
		top: 10px;
		color: grey;
		cursor: pointer;
	}

	&__show {
		display: flex;
		align-items: center;

		.img {
			width: 100px;
			height: 100px;
			border: solid 1px #e0e0e0;
			border-radius: 3px;
		}

		&--right {
			flex: 1;
			overflow: hidden;
			padding-left: 10px;
		}
	}

	::v-deep .el-form-item {
		margin-bottom: 0;
	}
}

.tips {
	margin-top: 10px;
	font-size: 24px;
	color: #999;
}
</style>
